<template>
  <!-- style="position:absolute; left: 50%; transform:translate(-50%,0);" -->
<div >
      <el-carousel class="carousel" :interval="5000" arrow="always">
      <el-carousel-item
        class="carousel-item"
        v-for="item in themes"
        :key="item.id"
      >
        <img :src="item.entranceImg" height="500px" />
      </el-carousel-item>
    </el-carousel>
</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getThemeApi } from "@/apis/home";


// 创建一个响应式的数组来存放专题图片数据
const themes = reactive([]);


const getThemeData = async () => {
  //获取专题数据
  const res = await getThemeApi();
  Object.assign(
    themes,
    res.data.data.filter((i) => i.entranceImg != null)
  );
};

// 在组件挂载前发送请求获取数据
onMounted(() => {
  getThemeData();
});

</script>

<style scoped>
.carousel {
  height: 400px;
  width: 700px;
  margin: auto;
}

.carousel-item {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}
</style>